import classNames from "classnames";
import { ReactNode, useContext } from "react";
import { TabsContext } from "./tabs";

export interface TabItemProps {
    index?: string;
    /** Tab选项上面的文字 */
    label: string;
    /** Tab选项是否被禁用 */
    disabled?: boolean;
    active?: boolean;
    children?: ReactNode;
}
const TabItem = ({
    index,
    label,
    disabled = false
}:TabItemProps) => {
    const context = useContext(TabsContext)
    const classes = classNames('tab-item',classNames,{
        'is-active': index === context.index,
        'is-disabled': disabled
    })

    const handlerClick = () => {
        if(context.onSelect && !disabled && (typeof index === 'string')) {
            context.onSelect(index)
        }
    }
    
    return (
        <>
            <li className={classes} onClick={handlerClick}>
                { label }
                {
                    context.type === 'card' &&  classes.includes('is-active') && <div className="hide-line"></div>
                }
            </li>
        </>
    )
}
TabItem.displayName = 'TabItem'

export default TabItem